<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="./css/index.css">
  <title>Title</title>
</head>
<body>

<!--头部-->
<header>黑马面面</header>
<!--导航部分-->
<nav>
  <a href=""><img src="./icons/icon1.png" alt=""><span>HR面试</span></a>
  <a href=""><img src="./icons/icon2.png" alt=""><span>笔试</span></a>
  <a href=""><img src="./icons/icon3.png" alt=""><span>技术面试</span></a>
  <a href=""><img src="./icons/icon4.png" alt=""><span>模拟面试</span></a>
  <a href=""><img src="./icons/icon5.png" alt=""><span>面试技巧</span></a>
  <a href=""><img src="./icons/icon6.png" alt=""><span>薪资查询</span></a>
</nav>
<!--go模块-->
<section class="go">
  <img src="./images/go.png" alt="">
</section>

<!--就业指导模块-->
<section class="content">
  <div class="con-hd">
    <h4><img src="./icons/i2.png" alt="">就业指导</h4>
    <a href="" class="more">更多>></a>
  </div>
</section>

<div class="get_job">
  <!-- Swiper -->
  <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
  <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
  <div class="swiper-container job_swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href=""><img src="./images/pic.png" alt=""></a>
        <p>老师教你应对面试技巧</p>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="./images/pic1.png" alt=""></a>
        <p>老师教你应对面试技巧</p>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="./images/pic2.png" alt=""></a>
        <p>老师教你应对面试技巧</p>
      </div>
    </div>

  </div>
</div>
<!--充电学习模块-->
<section class="content">
  <div class="con-hd">
    <h4><img src="./icons/i2.png" alt="">充电学习</h4>
    <a href="" class="more">更多>></a>
  </div>
</section>

<!--学习模块轮播图-->
<div class="study">
  <div class="swiper-container study_swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href=""><img src="./images/pic1.png" alt=""></a>
        <h5>说地道英语，告别中式英语</h5>
        <p>156人学习</p>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="./images/pic1.png" alt=""></a>
        <h5>说地道英语，告别中式英语</h5>
        <p>156人学习</p>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="./images/pic2.png" alt=""></a>
        <h5>说地道英语，告别中式英语</h5>
        <p>156人学习</p>
      </div>
      <div class="swiper-slide">
        <a href=""><img src="./images/pic2.png" alt=""></a>
        <h5>说地道英语，告别中式英语</h5>
        <p>156人学习</p>
      </div>
    </div>
  </div>
</div>
<footer>
  <a href=""><img src="./icons/home.png" alt=""><p>首页</p></a>
  <a href=""><img src="./icons/ms.png" alt=""><p>技术面试</p></a>
  <a href=""><img src="./icons/net.png" alt=""><p>模拟面试</p></a>
  <a href=""><img src="./icons/user.png" alt=""><p>我的主页</p></a>
</footer>
<script src="./js/flexible.js"></script>
<script src="./js/swiper.min.js"></script>
<script>
  const MySwiper = new Swiper('.job_swiper', {
    slidesPerView: 2,
    spaceBetween: 30,
    centeredSlides: true,
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
  const swiper = new Swiper('.study_swiper', {
    slidesPerView: 2.2,
    spaceBetween: 20,
  });
</script>
</body>
</html>